<template>
  <div class="main">
    <section>
      <search-form
        :listQuery="listQuery"
        :queryConfig="queryConfig"
        :labelWidth="100"
        :search="search"
      />
      <el-table
        v-loading="loading"
        :data="list"
        element-loading-text="给我一点时间"
        border
        fit
        highlight-current-row
      >
        <el-table-column align="center" label="手机号码">
          <template slot-scope="scope">
            <span>{{scope.row.mobile || '-'}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="淘宝账号" width="130">
          <template slot-scope="scope">
            <span>{{scope.row.outerNick || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="关联Id" width="210">
          <template slot-scope="scope">
            <span>{{scope.row.aliRid || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="210" v-if="rightsButtons['unbind']">
          <template slot-scope="scope">
            <el-button type="danger" plain @click="unbind(scope.row)">解绑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="listQuery.pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="listQuery.pageSize"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="listTotal"
      ></el-pagination>
    </section>
  </div>
</template>
<script>
import searchForm from "@/components/searchForm/index";
import { searchAuth, unBingUserAuth } from "@/api/bihuasuan/bind";
import moment from "moment";
export default {
  name: "b-bind",
  components: {
    searchForm
  },
  data() {
    return {
      listQuery: {
        mobile: "",
        outerNick: "",
        pageNum: 0,
        pageSize: 10
      },
      queryConfig: [
        {
          prop: "mobile",
          type: "input",
          label: "用户手机"
        },
        {
          prop: "outerNick",
          type: "input",
          label: "淘宝账号"
        }
      ],
      loading: true,
      listTotal: 0,
      list: []
    };
  },
  created() {
    this.getList();
  },
  methods: {
    async getList() {
      this.loading = true;
      try {
        const { data } = await searchAuth(this.listQuery);
        this.loading = false;
        this.list = data.list;
        this.listTotal = data.total;
      } catch (error) {
        console.log(error);
        this.list = [];
        this.listTotal = 0;
        this.loading = false;
      }
    },
    async unbind(val) {
      try {
          await  this.$confirm('此操作将解绑用户绑定关系是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        const { code } = await unBingUserAuth({
          operator: this.$store.getters.user.username,
          authUserId: val.userId
        });
        if (code === 200) {
          this.$message.success("解绑成功");
          this.getList();
        } else {
          this.$message.error("解绑失败");
        }
      } catch (error) {
          this.$message({
            type: 'info',
            message: '解绑失败'
          });   
      }
    },
    search() {
      this.getList();
    },
    //切换每页条数
    handleSizeChange(value) {
      this.listQuery.pageSize = value;
      this.getList();
    },
    // 切换分页
    handleCurrentChange(page) {
      this.listQuery.pageNum = page;
      this.getList();
    }
  }
};
</script>

 